<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigbox{
            width: 1000px;
            height: 800px;
            border: 1px solid black;
            display: flex;
        }
        .goodlist{
            width: 600px;
            height: 800px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .goodlist .item{
            width: 140px;
            height: 400px;
        }
        .goodlist .item .pic{
            position: relative;
            width: 140px;
            height: 300px;
            background-color: rgb(217, 211, 203);
        }
        .goodlist .item .pic img{  
            width: 130px;
            height: 130px;
            position: absolute;
            left: 50%;
            margin-left: -65px;
            top: 50%;
            margin-top: -65px;
        }
        .goodlist .item .name{
            margin-left: 10px;
            margin-top: 10px;
        }
        .goodlist .item .price{
            margin-left: 10px;
        }
        .goodlist .item button{
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            background-color: red;
            margin-left: 10px;
        }
        .right{
            position: relative;
            box-sizing: border-box;
            width: 400px;
            height: 100%;
            padding: 20px;
            border: 1px solid rgb(191, 183, 183);
            overflow: auto;
        }
        .right .gouwuche .item{
            width: 100%;
            height: 140px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .right .gouwuche .item .pic{
            width: 100px;
            height: 100%;
        }
        .right .gouwuche .item .pic img{
            width: 100%;
        }
        .right .gouwuche .item .pic .name{
            font-size: 14px;
        }
        /* .right .total{
            position: absolute;
            bottom: 10px;
            right: 20px;
        } */
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="goodlist">
            <!-- <div class="item">
                <div class="pic"><img src="./购物车图片/杯子1.jpeg" >
                </div>
                <div class="name">创意可爱陶瓷杯</div>
                <div class="price">99</div>
                <button>加入购物车</button>
            </div> -->
        </div>
        <div class="right">
            <div class="shoppingcart">购物车（0）</div>
            <div class="gouwuche">
                <!-- <div class="item">
                    <input class="btn" type="checkbox">
                    <div class="pic">
                        <img src="图片/杯子1.jpeg" alt="">
                        <div class="name">创意可爱陶瓷杯</div>
                    </div>
                    <div class="price">99</div>
                    <button class="jianhao">-</button>
                    <button class="count">1</button>
                    <button class="jiahao">+</button>
                    <button class="delete">删除</button>
                    <button class="collect">收藏</button>
                </div>
                <div class="item">
                    <input class="btn" type="checkbox">
                    <div class="pic">
                        <img src="图片/杯子5.jpeg" alt="">
                        <div class="name">创意可爱陶瓷杯</div>
                    </div>
                    <div class="price">99</div>
                    <button class="jianhao">-</button>
                    <button class="count">2</button>
                    <button class="jiahao">+</button>
                    <button class="delete">删除</button>
                    <button class="collect">删除</button>
                </div> -->
            </div>   
            <div class="total">商品总价：0</div>
        </div>
    </div> 
</body>
</html>
<script>
    // 添加容器   商品列表数据
    let goodlist = [ 
    {img:'./购物车图片/杯子1.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子2.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:2},
    {img:'./购物车图片/杯子3.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子5.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子12.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子11.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子7.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1},
    {img:'./购物车图片/杯子8.jpeg',name:'创意可爱陶瓷杯',price:'99',add:'加入购物车',count:1}
    ]
    // 购物车数据
    // let che = {list:[]}
    let arr = []
    //渲染商品列表
    function rendergoodlist(){
            let list = document.querySelector('.bigbox .goodlist');  
            console.log(list);
            list.innerHTML = goodlist.map((item)=>{
                return ` 
            <div class="item">
                <div class="pic"><img src="${item.img}" >
                </div>
                <div class="name">创意可爱陶瓷杯</div>
                <div class="price">99</div>
                <button>加入购物车</button>
            </div>`
            }).join('')
        }
        rendergoodlist()
        // 渲染购物车
        function rendergouwuche(){
            let gouwuche = document.querySelector('.gouwuche');  
            gouwuche.innerHTML = arr.map((item)=>{
                return `  
                <div class="item">
                    <input class="btn" type="checkbox">
                    <div class="pic">
                        <img src="${item.img}" alt="">
                        <div class="name">${item.name}</div>
                    </div>
                    <div class="price">${item.price}</div>
                    <button class="jianhao">-</button>
                    <button class="count">${item.count}</button>
                    <button class="jiahao">+</button>
                    <button class="delete">删除</button>
                    <button class="collect">收藏</button>
                </div>`
            }).join('')
        }
    // 给goodlist绑定点击事件
    let list = document.querySelector('.bigbox .goodlist');  
    list.onclick = function(e){
        if( e.target.tagName == 'BUTTON' ){
                //获取点击商品的下标
                let btns = [...document.querySelectorAll('button')]
                let index = btns.findIndex((item)=>{
                    return item == e.target;
                })
                //添加商品数据到 购物车数组
                arr.push( goodlist[index] );
                // console.log(arr);
                // console.log(goodlist[index]);
                rendergouwuche();
                rendergeshu()  
                renderzongjia() 
                renderjiahao()
                renderjianhao()
            }
    }
    function rendergeshu(){
        // 计算商品数量
        var count = 0
        arr.forEach((item)=>{
                count += item.count
            }) 
        // 渲染购物车的个数
        document.querySelector('.right .shoppingcart').innerHTML = `购物车(${count})`
    }
    function renderzongjia(){
        // 计算总价
        var price = arr.reduce((t,item)=>{  
            return t + item.count*item.price;  
            }, 0)  
        // 渲染总价
        document.querySelector('.right .total').innerHTML = `商品总价:${price}`
    }
    function renderjiahao(){
        

        // 获取+
        document.querySelector('.right .jiahao')
        
    }
    function renderjianhao(){

        // 获取—
        document.querySelector('.right .jianhao')
    }
</script>     

        
        